<script setup lang="ts">
import { getRecommendListApi, getRecommendMvApi } from "@/apis/music/recommend";
import { onBeforeMount, ref } from "vue";
import RecommendList from "./components/RecommendList.vue";
import RecommendMusic from "./components/RecommendMusic.vue";
import SearchCard from "./components/SearchCard.vue";
onBeforeMount(async () => {
  const res = await getRecommendMvApi();
});
</script>
<template>
  <div class="recommend">
    <SearchCard />
    <RecommendList></RecommendList>
    <RecommendMusic></RecommendMusic>
  </div>
</template>
<style scoped lang="scss">
.recommend {
  display: flex;
  flex-direction: column;
  width: 100%;
  // height: 100%;
  // overflow-y: scroll;
  row-gap: 20px;
}
</style>
